<template>
  <component :is="isComponents" :prop_data="component_prop" />
</template>
<script>
import { use } from 'echarts/core';
import { SVGRenderer } from 'echarts/renderers';
import { PieChart, BarChart } from 'echarts/charts';
import { markRaw } from 'vue';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from 'echarts/components';
import { THEME_KEY } from 'vue-echarts';
use([
  SVGRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  BarChart,
]);
let importComponents = {};
export default {
  props: ['svgInfoData', 'component_prop'],
  data() {
    return {
      componentTag: '',
      isComponents: {},
    };
  },
  components: importComponents,
  provide: {
    [THEME_KEY]: 'dark',
  },
  methods: {},
  created() {
    this.svgInfoData.forEach((f) => {
      importComponents[f.componentDataId] = {
        template: f.template,
        props: f.props,
      };
      f.componentDataId == this.component_prop.componentDataId
        ? (this.isComponents = markRaw({
            props: f.props,
            template: f.template,
          }))
        : '';
    });
  },
};
</script>
<style scoped lang="less"></style>
